<template>
  <div class="homePage" v-visibility-change="change">
    <div>{{ val }}</div>
    <div>aaaa{{listdata.a}}</div>
    <div class="ml-20" v-text="listdata.a"></div>
    <div class="ml-20" v-cloak>{{listdata.a}}</div>

    <div>{{listdata.a}}</div>
    <div class="ml-20" v-pre>{{listdata.a}}</div>
    <el-button class="ml-20" v-pre>{{listdata.a}}</el-button>
    <div class="vueTable">
      <!-- <el-input class="tableInput" type="text" placeholder="请输入内容" v-model="text" maxlength="10" show-word-limit>
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>-->
      <AUTOCOMPLETE
        ref="autocomplete"
        :list="tableData"
        placeholder="请输入姓名"
        @hook:mounted="autocompleteChange"
      />
      <JIDUSELECT
        ref="getSelectSeason"
        class="SelectSeason ml-20"
        @getSelectSeason="getSelectSeason"
        :disabled="true"
      />
      <el-button class="tableBtn ml-10" type="success" @click="reset"
        >重置</el-button
      >
      <el-button class="tableBtn mb-10" type="primary" @click="serach"
        >查询</el-button
      >
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        v-loading="loading"
        :span-method="objectSpanMethod"
      >
        <el-table-column type="index" label="序号" width="100">
          <template slot-scope="scope">
            <span>{{ "0" + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="class"
          label="班级"
        ></el-table-column>
        <el-table-column align="center" prop="name" label="姓名" width="180">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="Top Center 提示文字"
              placement="top"
            >
              <span>{{ scope.row.name }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="age" label="年龄">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              popper-class="atooltip"
              effect="dark"
              content="Top Center 提示文字"
              placement="top"
            >
              <span>{{ scope.row.age }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="quarterly"
          label="季度"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button size="mini" type="danger" @click="handlePage">跳转</el-button>
    <img src="@/assets/image/logo.png" alt="" v-image-preview />
    <!-- 有色icon -->
    <div>
      <span>有色icon</span>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-fenshu" />
      </svg>
    </div>
    <div class="animation-test-box">
      <div class="animation-test"></div>
    </div>
  </div>
</template>

<script>
import JIDUSELECT from "../components/jiduSelect.vue"; // 选择季度
import AUTOCOMPLETE from "../components/autocomplete.vue"; // 有建议的输入框
import {Base64} from 'js-base64'
import {mapGetters, mapState} from "vuex"
import axios from 'axios'
import { decryptDES, encryptDES } from "@/utils/des"
import Vue from 'vue'
import moment from "moment";
export default {
  name: "Home",
  components: {
    JIDUSELECT,
    AUTOCOMPLETE
  },
  data() {
    return {
      val: "Vue",
      text: "",
      tableData: [
        { class: '一班',name: "小明", age: "18", quarterly: "2020年4季度" },
        { class: '一班',name: "小红", age: "19", quarterly: "2020年3季度" },
        { class: '一班',name: "小蓝", age: "20", quarterly: "2020年4季度" },
        { class: '二班',name: "小黄", age: "17", quarterly: "2020年4季度" },
        { class: '二班',name: "小绿", age: "16", quarterly: "2020年4季度" },
        { class: '三班',name: "小紫", age: "18", quarterly: "2020年4季度" }
      ],
      tableResetData: [],
      tableResetDatass: [],
      quarterly: "",
      loading: false,
      courseArr: [],
      coursePos: 0,
      listdata: {a: ''}
    };
  },
  watch: {
    val:function(val, old) {
      console.log('new',val, 'old',old,this.text)
      
    }
  },
  computed:{
    // strVuex() {
    //     return this.$store.state.str // 获取store里面的值方法一
    // },
    // ...mapState(['str']),   // 获取store里面的值方法二
    // // // ...mapState({mystr:'str'}),  // 获取store里面的值方法三
    // ...mapGetters(['getName']) // 通过store/index.js里面的getters里面的自定义方法获取值
  },
  created() {

    // decodeURIComponent会把%20解析为空格,但是其实代表的是+,所以先把%20替换为+
    let p = decodeURIComponent('CPWpcwPXmPvdq%203GmG8GmB5%209kZmMa8lGoAUXPQBx3lPxCxFog0X6w%3D%3D'.replace(/\%20/g, '+'))
    p = decryptDES(p)
    console.log("🚀 ~ file: Home.vue ~ line 15211 ~ created ~ p", p)
    let s = 'dce98c86c021e751fd935c474b2ba957'
    console.log("未经过des加密的p", s)

    let f = encodeURIComponent('CPWpcwPXmPvdq+3GmG8GmB5+9kZmMa8lGoAUXPQBx3lPxCxFog0X6w==')
    console.log("🚀 ~ file: Home.vue ~ line 159 ~ created ~ f", f)

    this.tableResetData = JSON.parse(JSON.stringify(this.tableData));
    this.tableResetDatass = JSON.parse(JSON.stringify(this.tableData));
    this.courseinit();
    // console.log('floor',Math.floor(11.5),Math.floor(-11.5));
    // console.log('round',Math.round(11.5),Math.round(-11.5));
    let a = '/jw/demand/create?appCode=JwDemand&action=processStart&time=2022-04-04'
    let b = Base64.encode(a);
    let c = Base64.decode(b);
    // console.log('加密',b);
    // console.log('解密',c);
  },
  mounted() {
    console.log('route',this.$route);
    console.log('router',this.$router);

    let a = moment().format('yyyy-MM-DD')
    let b = moment('2022-12-04').format('yyyy-MM-DD')
    let c = moment(a).diff(moment(b),'days')
    console.log("🚀 ~ file: Home.vue ~ line 164 ~ created ~ cccc", c)
    
    console.log('qqqq',this.$el,'this.data',this.$data,Vue.version);

    setTimeout(()=>{
      this.listdata.a = '欢迎使用VUE'
    },2000)
    this.testFunc(1,2,3,4,5)
    let aa = this.$store.state.str
    console.log(4444,aa);
    // console.log(222,mapState(["str"]));
    // console.log(333,this.str);
    // let validator = {
    //   set: function(obj, prop, value) {
    //     if (prop === 'age') {
    //       if (!Number.isInteger(value)) {
    //         throw new TypeError('The age is not an integer');
    //       }
    //       if (value > 200) {
    //         throw new RangeError('The age seems invalid');
    //       }
    //     }

    //     // 对于满足条件的 age 属性以及其他属性，直接保存
    //     obj[prop] = value;
    //     console.log('符合条件');
        
    //   }
    // };

// let person = new Proxy({}, validator);

// person.age = 100;

// person.age // 100
// person.age = 'young' // 报错
// // person.age = 300 // 报错
//     let a = new Set(['w','q','t','y','y','q','p'])

//     // a = a.join('')
//     let b = new Set(['w','q','t','y','o'])
//     console.log('22222,',a);
//     console.log( '3333',[...new Set([...a].filter(x => !b.has(x)))]);
  },
  methods: {
    autocompleteChange(val) {
      console.log("autocompleteChangeautocompleteChangeautocompleteChangeautocompleteChange", val)
    },
    change(val,old) {
    console.log("🚀 ~ file: Home.vue ~ line 195 ~ change ~ old", old)
    console.log("🚀 ~ file: Home.vue ~ line 195 ~ change ~ val更新", val)
      
    },
    courseinit() {
            // 首先初始化
            var _this = this;
            this.courseArr = []
            this.coursePos = 0
            for (var i = 0; i < _this.tableData.length; i++) {
             //判断是否是第一行
                if (i === 0) {
                	//导入第一行数据
                    _this.courseArr.push(1)
                    _this.coursePos = 0
                } else {
                //不是第一行时，就根据标识去存储，course为我第一行的prop属性的值
                    if (_this.tableData[i].class === _this.tableData[i - 1].class) {
                     // 查找到下一行的数据等于上一行的数据时每次要把之前存储的数据+1
                        _this.courseArr[_this.coursePos] += 1
                        _this.courseArr.push(0)
                    } else {
                    // 没有相同的数据时候，要记住当前的index
                        _this.courseArr.push(1)
                        _this.coursePos = i
                    }
                }
            }
    },
    objectSpanMethod({rowIndex, columnIndex}) {
			//判断第一列的数据，上下行有没有相同的数据，有则合并，无则保留
      if (columnIndex === 0) {
        //courseArr数组是上面输出来的，用来合并表格前做的数据判断
          const row1 = this.courseArr[rowIndex]
          const col1 = row1 > 0 ? 1 : 0
          return {
              rowspan: row1,
              colspan: col1
          }
      } 
      // else  if (columnIndex === 1) {
      // //这里是判断第二列的数据，nameArr和领域合并时候的处理一样，以此类推
      //     const row1 = this.nameArr[rowIndex]
      //     const col1 = row1 > 0 ? 1 : 0
      //     return {
      //         rowspan: row1,
      //         colspan: col1
      //     }
      // }
    },

    testFunc(val1,val2,val3,val4,val5) {
        console.log(val1,'-',val2,'-',val3,'-',val4,'-',val5);
    },
    handlePage() {
      window.open(
        '#/numTo'
        // '/#/selectTree'
      )

// var context = {
//     device_id : "device_id",
// };
// var header = {
//     appkey : "hBdqcakO9UUIusKD",
//     token : "8e73099d9b7a4b43899df3b5204c7fde",
// };
// var tts_request = {
//     text : "今天是周一，天气挺好的。",
//     voice : "shanshan",
//     format : 'wav',
//     "sample_rate" : 16000,
//     "enable_subtitle" : false
// };
// var payload = {
//     "enable_notify" : false,
//     //回调服务的地址。当enable_notify取值为true时，本字段必填。
//     "notify_url": "http://123.com",
//     "tts_request" : tts_request,
// };
// var tts_body = {
//     "context" : context,
//     "header" : header,
//     "payload" : payload
// };
// // var bodyContent = JSON.stringify(tts_body);
// var bodyContent = tts_body;
// console.log('The POST request body content: ' + bodyContent);
// // 设置HTTPS POST请求头部。
// var httpHeaders = {'Content-type' : 'application/json'};
// // 设置HTTPS POST请求。
// // encoding必须设置为null，HTTPS响应的Body为二进制Buffer类型。
// var options = {
//     // url: url,
//     // method: 'POST',
//     // headers: httpHeaders,
//     body: bodyContent,
//     encoding: null
// };



//       axios.post("/rest/v1/tts/async",options).then(res=>{
//         console.log('res',res);
//       })
      // window.location.href='https://www.baidu.com/';
    },








    
    // 获取季度日期
    getSelectSeason(val) {
      console.log("val---", val);
      let year = val.slice(0, 4); // 年
      let month = val.slice(5, 6); // 季度
      console.log("year---", year + "-" + month);
      // this.quarterly = val;
    },
    loadAll() {
      return [
        { name: "小明", age: "18" },
        { name: "小红", age: "19" },
        { name: "小蓝", age: "20" },
        { name: "小黄", age: "17" },
        { name: "小绿", age: "16" }
      ];
    },
    // 查询
    serach() {
      this.loading = true;
      this.val = 'hahahaha';
      setTimeout(() => {
        let arr = [];
        let data = JSON.parse(JSON.stringify(this.tableResetData));
        let showValue = this.$refs["getSelectSeason"].showValue;
        for (var i = 0; i < data.length; i++) {
          if (showValue) {
            if (
              data[i].name
                .toLowerCase()
                .indexOf(this.$refs["autocomplete"].state1.toLowerCase()) >=
                0 &&
              data[i].quarterly
                .toLowerCase()
                .indexOf(showValue.toLowerCase()) === 0
            ) {
              arr.push(data[i]);
            }
          } else {
            console.log("123456", showValue);
            if (
              data[i].name
                .toLowerCase()
                .indexOf(this.$refs["autocomplete"].state1.toLowerCase()) >= 0
            ) {
              arr.push(data[i]);
            }
          }
        }
        this.tableData = arr;
        this.loading = false;
      }, 1000);
    },
    // 重置
    reset() {
      this.loading = true;
      setTimeout(() => {
        this.tableData = this.tableResetDatass;
        console.log("this.tableResetDatass", this.tableResetDatass);

        this.loading = false;
        this.$refs["autocomplete"].state1 = "";
        this.$refs["getSelectSeason"].showValue = ""; // 重置季度选择器输入框的值
        this.$refs["getSelectSeason"].year = new Date().getFullYear(); // 重置季度选择器选择的年份为当前年
      }, 1000);
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    }
  }
};
</script>
<style lang="less" scoped>
 [v-cloak]{
            display: none!important;
        }

.homePage {
  .vueTable {
    margin: 0 20px;
  }
  .tableBtn {
    float: right;
  }
  .tableInput {
    width: 200px;
    float: left;
  }
  .jidu {
    height: 300px;
  }
  .SelectSeason {
    display: inline;
  }
  .animation-test-box {
    background: #000;
    width: 80%;
    margin-bottom: 50px;
    .animation-test {
      height: 200px;
      width: 200px;
      color: #fff;
      margin-left: 100px;
      position: relative;
      // background: url("~@/assets/image/tz-logo.png") no-repeat;
      // background-size: 100% 100%;
      // -webkit-animation:play 3s linear infinite;
      // -moz-animation:play 3s linear infinite;
      // transform: rotate(360deg);
      // animation:play 5s infinite linear;
    }

    .animation-test::before {
      content: "";
      width: 180px;
      height: 180px;
      position: absolute;
      top: 3%;
      left: 3%;
      //  z-index: -1;
      background: url("~@/assets/image/tz-logo.png") no-repeat;
      background-size: cover;
      //  -webkit-transition-property: -webkit-transform;
      //  -webkit-transition-duration: 10s;
      //  -moz-transition-property: -moz-transform;
      //  -moz-transition-duration: 10s;
      -webkit-animation: play 10s linear infinite;
      -moz-animation: play 10s linear infinite;
      -o-animation: play 10s linear infinite;
      animation: play 10s linear infinite;
    }

    @-webkit-keyframes play {
      0% {
        /*
          水平翻转
          */
        // -webkit-transform:rotateY(0deg);

        // 垂直翻转
        // -webkit-transform:rotateX(0deg);
        // 顺时针旋转
        -webkit-transform: rotate(0deg);
        // transform:rotate(0deg);
        // 逆时针旋转
        // -webkit-transform:rotate(0deg);
      }
      100% {
        /* 水平翻转 */
        // -webkit-transform:rotateY(360deg);
        // 垂直翻转
        // -webkit-transform:rotateX(360deg);
        // 顺时针旋转
        -webkit-transform: rotate(360deg);
        // transform:rotate(360deg);
        // 逆时针旋转
        // -webkit-transform:rotate(-360deg);
      }
    }
  }
}
</style>
<style lang="less">
// tooltip箭头边框颜色               这里的top是跟设置气泡出现的方向有关(placement属性)
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: rgb(223, 223, 223);
}
// tooltip箭头背景颜色
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: white;
}
// tooltip气泡
.atooltip {
  background: #fff !important;
  border: 1px solid rgb(223, 223, 223) !important;
  font-size: 0.13rem;
  color: rgb(189, 185, 185) !important;
}

.vue-directive-image-previewer-img {
  max-width: 580px;
  max-height: 580px;
  margin: 100px 0 0 18px;
  transition: all 0ms ease 0ms;
  border: none;
}
</style>
 